<template>
    <div>
        <el-dialog v-model="isup" width="350" title="重置验证码" append-to-body :close-on-click-modal="false">
            <div class="flex-shrink-0 mb-8px">手机号</div>
            <el-input v-model="phone" placeholder="请输入手机号"></el-input>
            <div v-if="showErr && isShow" class="mt-10px text-12px text-red-5">请输入正确的手机号</div>
            <div class="flex items-center justify-center mt-30px">
                <el-button type="" @click="isup = false">取消</el-button>
                <el-button type="primary" @click="onResetCaptcha">重置</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref, watch } from 'vue'
import { resetCaptchaApi } from '@/api/resetCaptcha/resetCaptcha'
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    }
})
const emits = defineEmits(['update:show'])
const isup = ref(false)
const isShow = ref(true)
const showErr = ref(false)
const phone = ref('')
// 手机号正则
const reg = new RegExp('^1[3456789]\\d{9}$')
watch(phone, (newval) => {
    if (!reg.test(newval)) {
        console.log('请输入正确的手机号')
        showErr.value = true
    } else {
        showErr.value = false
    }
})
const init = () => {
    phone.value = ''
    showErr.value = false
}
const onResetCaptcha = async () => {
    if (!phone.value) {
        ElMessage.warning('请输入手机号')
        return
    }
    if (!reg.test(phone.value)) {
        ElMessage.warning('请输入正确的手机号')
        return
    }
    await resetCaptchaApi({ phone: phone.value })
    await ElMessage.success('重置成功')
    isup.value = false
}
watch(
    () => props.show,
    (newval) => {
        if (newval) {
            isShow.value = true
        } else {
            isShow.value = false
        }
        init()
        isup.value = newval
    }
)
watch(isup, (newval) => {
    if (!newval) {
        isShow.value = false
    }
    init()
    emits('update:show', newval)
})
</script>
<style lang="scss" scoped></style>
